<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/angular.min.js"></script>
<script type="text/javascript" src="./js/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css"> 
<style>
.panel{width:60%;margin:0 auto;text-align: center;}
.form-inline{width:60%;margin:0 auto;}
</style>
</head>	
<body ng-app="app" ng-controller="ctrl">
	<div class="panel">
		<div class="row req form-inline">
	        <div class="col-md-8 col-md-offset-4 solid_top form-group">
	            <div class="pull-right">
	                <label>展示条数: 
	                    <select  class="form-control" ng-change="change(selectedLimit)" ng-model="selectedLimit" ng-options="value.limit for value in values"></select>
	                </label>
	            </div>
	        </div>
	    </div>  
		<table class="table">
            <thead>
                <tr>
                    <td>序号</td>
                    <td>模块</td>
                    <td>信息</td>
                    <td>时间</td>
                </tr>
            </thead>
            <tbody>
                <tr  ng-repeat="data in datas">
                    <td>{{data.order}}</td>
                    <td>{{data.module}}</td>
                    <td>{{data.message}}</td>
                    <td>{{data.time}}</td>
                </tr>
            </tbody>
        </table>
	</div>
	<div class="row form-inline">
		<div class="col-md-8">
		  	<uib-pagination 
		  		total-items="page.totalCount" 
		  		ng-model="page.pageNo" 
		  		max-size="5" 
		  		class="samplePage pagination" 
		  		boundary-links="true" 
		  		force-ellipses="false"
		  		first-text="首页" 
		  		last-text="末页" 
		  		previous-text="上一页"
		  		next-text="下一页" 
		  		items-per-page="page.limit"
		  		ng-change="pageChanged()" 
		  		boundary-link-numbers="true"
		  		>
		</uib-pagination>
		</div> 
	  	<div class="col-md-4">
			<input type="text" class="form-control" style="width:100px;margin:25px 0" name="" ng-model="go" />
			<a class="btn btn-primary btn-sm" ng-click="setPage(go)">跳转</a>
	  	</div>  
	</div>
	<script type="text/javascript">
		var allJson = {"total":20,"data":[
			{
		      "order":10,"module":"模块10",
		      "message":"信息1",
		      "time":"2016-07-02"
		    },{
		      "order":9,"module":"模块9",
		      "message":"信息2",
		      "time":"2016-07-02"
		    },{
		      "order":8,"module":"模块8",
		      "message":"信息3",
		      "time":"2016-07-02"
		    },{
		      "order":7,"module":"模块7",
		      "message":"信息4",
		      "time":"2016-07-02"
		    },{
		      "order":6,"module":"模块6",
		      "message":"信息5",
		      "time":"2016-07-02"
		    },{
		      "order":5,"module":"模块5",
		      "message":"信息6",
		      "time":"2016-07-02"
		    },{
		      "order":6,"module":"模块4",
		      "message":"信息7",
		      "time":"2016-07-02"
		    },{
		      "order":7,"module":"模块3",
		      "message":"信息8",
		      "time":"2016-07-02"
		    },{
		      "order":8,"module":"模块2",
		      "message":"信息9",
		      "time":"2016-07-02"
		    },{
		      "order":9,"module":"模块1",
		      "message":"信息10",
		      "time":"2016-07-02"
		    },{
		      "order":10,"module":"模块1",
		      "message":"信息11",
		      "time":"2016-07-02"
		    },{
		      "order":11,"module":"模块1",
		      "message":"信息12",
		      "time":"2016-07-02"
		    },{
		      "order":12,"module":"模块1",
		      "message":"信息13",
		      "time":"2016-07-02"
		    },{
		      "order":13,"module":"模块1",
		      "message":"信息14",
		      "time":"2016-07-02"
		    },{
		      "order":14,"module":"模块1",
		      "message":"信息15",
		      "time":"2016-07-02"
		    },{
		      "order":15,"module":"模块1",
		      "message":"信息16",
		      "time":"2016-07-02"
		    },{
		      "order":16,"module":"模块1",
		      "message":"信息17",
		      "time":"2016-07-02"
		    }]
		};
		var pageApp = angular.module("app",['ui.bootstrap']);		
		pageApp.controller("ctrl",function($scope, $http){
			/*$http({
		        method: 'GET',
		        url: 'test.json'
		    }).success(function (response) {
		    	//总条数
		    	$scope.total = response.total;
		    	//反转函数转化abcd转dcba
		        $scope.data = response.data.reverse();
		        //选择显示的条数
		        $scope.values = [{"limit":3},{"limit":4},{"limit":5},{"limit":6},{"limit":7},{"limit":8}];
		        //默认显示的条数
			    $scope.selectedLimit=$scope.values[0];
			    //默认显示当前页数
			    $scope.currentPage = 1;
			    if($scope.data != null){
			    	$scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.currentPage-1),$scope.selectedLimit.limit*$scope.currentPage);
			    }else{
			    	alert($scope.data);
			    }
			    $scope.page = {
			    "limit":$scope.selectedLimit.limit,"pageSize":5,"pageNo":$scope.currentPage,"totalCount":$scope.total};
		    })*/		    
		    //总条数
	    	$scope.total = allJson.total;
	    	//反转函数转化abcd转dcba
	        $scope.data = allJson.data.reverse();
	        //选择显示的条数
	        $scope.values = [{"limit":1},{"limit":1},{"limit":3},{"limit":4},{"limit":5}];
	        //默认显示的条数
		    $scope.selectedLimit=$scope.values[0];
		    //默认显示当前页数
		    $scope.currentPage = 1;
		    if($scope.data != null){
		    	$scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.currentPage-1),$scope.selectedLimit.limit*$scope.currentPage);
		    }else{
		    	alert($scope.data);
		    }
		    $scope.page = {
		    "limit":$scope.selectedLimit.limit,"pageSize":5,"pageNo":$scope.currentPage,"totalCount":$scope.total};
		    //console.log($scope.data);
		    $scope.change = function(selectedLimit){
		        $scope.page.limit = selectedLimit.limit;
		        $scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
		    }
		    $scope.pageChanged = function(){
		        $scope.page.limit = $scope.selectedLimit.limit;
		        $scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
		    }
		    $scope.setPage = function (go) {
		        $scope.length = Math.ceil($scope.total/$scope.selectedLimit.limit);
		        console.log($scope.length);
		        if(go > $scope.length){
		            $scope.page.pageNo =  $scope.length;
		            console.log($scope.length);
		            
		        }else{
		            $scope.page.pageNo=go; 
		        }
		        $scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
		    };
	});
	</script>
</body>
</html>